import 'package:flutter/material.dart';
import 'package:flutter_hplus/pages/tables/basic_table_page.dart';
import 'package:flutter_hplus/pages/tables/button_table_page.dart';
import 'package:flutter_hplus/pages/tables/editable_table_page.dart';
import 'package:flutter_hplus/theme/theme.dart';

/// 数据表格页面
/// 
/// 展示数据表格组件的使用方法和效果，与原HTML版本保持一致
class DataTablePage extends StatefulWidget {
  /// 构造函数
  const DataTablePage({super.key});

  @override
  State<DataTablePage> createState() => _DataTablePageState();
}

class _DataTablePageState extends State<DataTablePage> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
    _tabController.addListener(() {
      // 强制更新以刷新标签颜色
      if (_tabController.indexIsChanging) {
        setState(() {});
      }
    });
  }
  
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  // 构建单个Tab
  Widget _buildTab(String text, int index) {
    final theme = HTheme.of(context);
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(theme.dimens.borderRadius - 2),
        color: _tabController.index == index ? theme.colors.primary : Colors.transparent,
      ),
      child: Text(
        text,
        style: TextStyle(
          color: _tabController.index == index ? Colors.white : theme.colors.textSecondary,
          fontWeight: _tabController.index == index ? FontWeight.w600 : FontWeight.normal,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final theme = HTheme.of(context);
    
    return SingleChildScrollView(
      child: Container(
        padding: EdgeInsets.all(theme.dimens.spacingL),
        color: theme.colors.background, // 灰色背景，与原HTML页面一致
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 顶部标题和说明
            _buildHeader(theme),
            
            const SizedBox(height: 16),
            
            // 标签页
            Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(theme.dimens.borderRadius),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.05),
                    blurRadius: 5,
                    offset: const Offset(0, 2),
                  ),
                ],
              ),
              child: Column(
                children: [
                  // Tab标签
                  Container(
                    margin: const EdgeInsets.all(16.0),
                    padding: const EdgeInsets.all(4.0),
                    decoration: BoxDecoration(
                      color: theme.colors.background,
                      borderRadius: BorderRadius.circular(theme.dimens.borderRadius),
                      border: Border.all(color: theme.colors.divider),
                    ),
                    child: TabBar(
                      controller: _tabController,
                      labelColor: Colors.white,
                      unselectedLabelColor: theme.colors.textSecondary,
                      labelStyle: theme.textStyles.emphasis,
                      unselectedLabelStyle: theme.textStyles.body,
                      indicator: const BoxDecoration(), // 空指示器
                      indicatorSize: TabBarIndicatorSize.tab,
                      padding: EdgeInsets.zero,
                      labelPadding: const EdgeInsets.symmetric(horizontal: 4.0, vertical: 4.0),
                      dividerColor: Colors.transparent,
                      isScrollable: false,
                      tabAlignment: TabAlignment.center,
                      tabs: [
                        _buildTab('基本表格', 0),
                        _buildTab('可编辑表格', 1),
                        _buildTab('按钮表格', 2),
                      ],
                    ),
                  ),
                  
                  // Tab内容
                  SizedBox(
                    height: 680, // 设定一个固定高度
                    child: TabBarView(
                      controller: _tabController,
                      children: const [
                        // 基本表格
                        BasicTablePage(),
                        // 可编辑表格
                        EditableTablePage(),
                        // 按钮表格
                        ButtonTablePage(),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
  
  /// 构建页面顶部标题和说明
  Widget _buildHeader(HTheme theme) {
    return Container(
      padding: EdgeInsets.all(theme.dimens.spacingL),
      color: theme.colors.surface,
      child: Row(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '数据表格',
                style: theme.textStyles.h2,
              ),
              const SizedBox(height: 8),
              Text(
                '提供了两种表格示例：基本表格展示了常规数据展示功能；可编辑表格展示了增删改查的交互功能。',
                style: theme.textStyles.body,
              ),
            ],
          ),
        ],
      ),
    );
  }
} 